﻿@page "/components/toggleiconbutton"

<DocsPage>
    <DocsPageHeader Title="Toggle Icon Button">
        <Description>
            A toggleable implementation of <CodeInline>MudIconButton</CodeInline> where you can use its familiar API to define two different states which you can toggle between. For available icons, go to <MudLink Href="/components/icons">Icons.</MudLink>. Custom icons are passed as an SVG string.
        </Description>
    </DocsPageHeader>

    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Basic usage">
                <Description>Use two-way binding <CodeInline>@(@"@bind-Toggle=""...""")</CodeInline> to update a bound value in the parent component.</Description>
            </SectionHeader>
            <SectionContent Code="ToggleIconButtonTwoWayBindingExample">
                <ToggleIconButtonTwoWayBindingExample />
            </SectionContent>
        </DocsPageSection>
    </DocsPageContent>

    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Advanced usage">
                <Description>You may act on the toggled state by using the <CodeInline>Toggled</CodeInline> EventCallback.</Description>
            </SectionHeader>
            <SectionContent Code="ToggleIconButtonEventCallbackExample" ShowCode="false">
                <ToggleIconButtonEventCallbackExample />
            </SectionContent>
        </DocsPageSection>
    </DocsPageContent>

</DocsPage>
